<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
	//response.sendRedirect("common/login");
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path}/resource/js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="${path}/resource/js/echarts.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id="main" style="width: 540px; height: 400px; float: left;"></div>
	<div id="bot" style="width: 540px; height: 400px; float: left;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 指定图表的配置项和数据
		myChart.setOption({
			title : {
				text : '用户分析'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			series : [ {
				name : 'ID',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '50%' ],
				data : []
			} ]
		});
		myChart.showLoading();
		var Chart = echarts.init(document.getElementById('bot'));
		var dataAxis = [ '点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏',
				'上', '滑', '动', '能', '够', '自', '动', '缩', '放' ];
		var data = [ 220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
				210, 122, 133, 334, 198, 123, 125, 220 ];
		var yMax = 500;
		var dataShadow = [];

		for (var i = 0; i < data.length; i++) {
			dataShadow.push(yMax);
		}
		var zoomSize = 6;
		var borc = [];
		var borcAxis = [];
		var yMax =100;
		var dataShadow = [];

		for (var i = 0; i < data.length; i++) {
			dataShadow.push(yMax);
		}
		$.ajax({
					type : "post",
					async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					url : "${path}/developer/user/all",
					//请求发送到TestServlet处
					data : {},
					dataType : "json", //返回数据形式为json
					success : function(result) {
						//debugger
						var res = [];
						//请求成功时执行该函数内容，result即为服务器返回的json对象
						if (result) {
							var _div = "<tr><th scope='col' id='roomid'>用户名</th><th scope='col'>用户ID</th></tr>";
							$("#mess").append(_div);
							for (var i = 0; i < result.rows.length; i++) {
								res.push({
									name : result.rows[i].userName,
									value : result.rows[i].userId
								});
								var _div = "<tr align='middle'> <td>"
										+ result.rows[i].userName
										+ "</td><td align='middle'>"
										+ result.rows[i].userId + "</td></tr>";
								$("#mess").append(_div);
								borc.push(result.rows[i].userId);
								borcAxis.push(result.rows[i].userName);
							}
							console.log();
							myChart.hideLoading(); //隐藏加载动画
							myChart.setOption({
								series : [ {
									// 根据名字对应到相应的系列
									name : 'ID',
									data : res
								} ]
							});
							Chart.setOption({
								title : {
									text : '特性示例：渐变色 阴影 点击缩放',
									subtext : 'Feature Sample: Gradient Color, Shadow, Click Zoom'
								},
								xAxis : {
									data : borcAxis,
									axisLabel : {
										inside : true,
										textStyle : {
											color : '#fff'
										}
									},
									axisTick : {
										show : false
									},
									axisLine : {
										show : false
									},
									z : 10
								},
								yAxis : {
									axisLine : {
										show : false
									},
									axisTick : {
										show : false
									},
									axisLabel : {
										textStyle : {
											color : '#999'
										}
									}
								},
								dataZoom : [ {
									type : 'inside'
								} ],
								series : [
										{ // For shadow
											type : 'bar',
											name:"bary",
											itemStyle : {
												normal : {
													color : 'rgba(0,0,0,0.05)'
												}
											},
											barGap : '-100%',
											barCategoryGap : '40%',
											data : dataShadow,
											animation : false
										},
										{
											type : 'bar',
											name:"barx",
											itemStyle : {
												normal : {
													color : new echarts.graphic.LinearGradient(0,
															0, 0, 1, [ {
																offset : 0,
																color : '#83bff6'
															}, {
																offset : 0.5,
																color : '#188df0'
															}, {
																offset : 1,
																color : '#188df0'
															} ])
												},
												emphasis : {
													color : new echarts.graphic.LinearGradient(0,
															0, 0, 1, [ {
																offset : 0,
																color : '#2378f7'
															}, {
																offset : 0.7,
																color : '#2378f7'
															}, {
																offset : 1,
																color : '#83bff6'
															} ])
												}
											},
											data : borc
										} ]
							});
							
						}
					},
					error : function(errorMsg) {
						//请求失败时执行该函数
						alert("图表请求数据失败!");
						myChart.hideLoading();
					}
				})
				
		
		// Enable data zoom when user click bar.
		var zoomSize = 6;
		Chart.on('click',
				function(params) {
					console.log(borcAxis[Math.max(params.dataIndex - zoomSize
							/ 2, 0)]);
					Chart.dispatchAction({
						type : 'dataZoom',
						startValue : borcAxis[Math.max(params.dataIndex
								- zoomSize / 2, 0)],
						endValue : borcAxis[Math.min(params.dataIndex
								+ zoomSize / 2, data.length - 1)]
					});
				});
		// Enable data zoom when user click bar.
		
	</script>
</body>
</html>